<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../plugins/datatables/css/jquery.dataTables.css">
    <link rel="stylesheet" href="../css/rmp.css" media="all">
</head>
<body>
<div class="layui-fluid">

    <div class="rmp-serverInfo-btn-tools">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm" data-type="">全部</button>
        </div>
        <span class="rmp-serverInfo-btn-tools-right">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-sm">添加服务器</button>
                <button class="layui-btn layui-btn-sm">批量操作</button>
                <button class="layui-btn layui-btn-sm"><i class="layui-icon">&#x1002;</i></button>
            </div>
        </span>
    </div>

    <div class="rmp-serverInfo-table">
        <hr>
        <table class="layui-table" lay-skin="line row">
            <thead>
            <tr>
                <th><input type="checkbox"></th>
                <th>ID</th>
                <th>HOST</th>
                <th>真实HOST</th>
                <th>用户名</th>
                <th>密码</th>
                <th>类型</th>
                <th>添加时间</th>
                <th>最近使用</th>
                <th>标签</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<!--添加、更新。复制的表单模板 start-->
<script type="text/html" id="server-info-edit-tpl">
    <div class="rmp-serverInfo-edit-form layer-show-view">
        <form class="layui-form layui-form-pane" action="" lay-filter="server-info-form">
            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select name="serverType" id="serverType" value="{{d.serverType || ''}}">
                        {{# $.each(d.serverTypes, function(type, name){ }}
                        <option value="{{type}}">{{name}}</option>
                        {{# }); }}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">HOST</label>
                <div class="layui-input-block">
                    <input type="text" value="{{d.host || ''}}" name="host" id="host" required lay-verify="required" placeholder="IP地址" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">真实HOST</label>
                <div class="layui-input-block">
                    <input type="text" value="{{d.realHost || ''}}" name="realHost" id="realHost" autocomplete="off" class="layui-input" placeholder="如果使用了端口转发，请输入该服务器真实的IP地址">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">端口号</label>
                <div class="layui-input-block">
                    <input type="text" value="{{d.port || ''}}" name="port" id="port" placeholder="Linux默认为22可不填写,其他类型需要填写" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" value="{{d.username || ''}}" name="username" id="username" placeholder="没有则不填" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" value="{{d.password || ''}}" name="password" id="password" placeholder="没有则不填" autocomplete="off" class="layui-input">
                </div>
            </div>
            <input type="hidden" name="createTime" id="createTime" value="{{d.createTime || ''}}"/>
            <input type="hidden" name="lastUseTime" id="lastUseTime" value="{{d.lastUseTime || ''}}"/>
            <input type="hidden" name="id" id="id" value="{{d.id || ''}}"/>
            <div class="layui-form-item">
                <label class="layui-form-label">标签</label>
                <div class="layui-input-block">
                    <input type="text" value="{{d.tags || ''}}" name="tags" id="tags" placeholder="使用空格区分" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <input type="button" id="server-info-setting-parameters" value="附加项设置" class="layui-btn layui-btn-normal"/>
            </div>
            <input type="hidden" name="parameters" id="parameters" value='{{d.parameters || ""}}'/>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="server-info-single-edit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
</script>
<!--添加、更新。复制的表单模板 end-->
<!--批量添加的模板 start-->
<script type="text/html" id="server-info-batch-add-tpl">
<div class="layer-show-view">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select name="serverType" id="serverType">
                    {{# $.each(serverInfos.serverTypes, function(type, name){ }}
                    <option value="{{type}}">{{name}}</option>
                    {{# }); }}
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <textarea name="infos" required lay-verify="required" placeholder="host,realHost,port,username,password,tags,other..." class="layui-textarea" rows="5"></textarea>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit lay-filter="server-info-batch-save">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
        <div class="layui-form-item">
            <p id="batch-add-server-tip" style="color:#FF5722;">添加格式:登录IP,真实IP,端口,用户名,密码,标签,其他参数如下</p>
            {{# $.each(serverInfos.serverTypes, function(type, name){ }}
            <p><strong>{{name}}:</strong>
            {{# $.each(serverInfos[type]['additionalParameters'], function(i, n){ }}
                {{n.mark}},
            {{# }); }}
            </p>
            {{# }); }}
            <p style="color:#FF5722;">相关说明：</p>
            <p>1、不需要填写或者留空的请不要省略[标签和附加参数可以批量省略];</p>
            <p>2、可以使用中文或者英文格式下的逗号[,或者，]作为分隔符;</p>
            <p>3、每次只能添加同类型的信息;</p>
        </div>
    </form>
</div>
</script>
<!--批量添加的模板 end-->
<!--附加参数编辑页面模板 start-->
<script type="text/html" id="server-info-parameters-edit-tpl">
    <div class="rmp-serverInfo-edit-parameter">
        <form class="layui-form layui-form-pane" action="">
            {{# $.each(d.parameters, function(key, option){ }}
            <div class="layui-form-item">
                <label class="layui-form-label">{{ option.mark }}</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="{{option.placeholder}}" name="{{key}}" id="{{key}}" autocomplete="off" class="layui-input" value="{{d.values[key] || option.defaultValue}}">
                </div>
            </div>
            {{# });}}
        </form>
    </div>
</script>
<!--附加参数编辑页面模板 end-->
<script src="../plugins/jquery.js"></script>
<script src="../plugins/layui/layui.js"></script>
<script src="../plugins/datatables/js/jquery.dataTables.js"></script>
<script src="../js/global.js"></script>
<script>
var globalLoadIndex;
var table;

/**************layui tpl模板*****************/
var serverInfoEditTpl;
var serverInfoParameterEditTpl;
var serverInfoBatchSaveTpl;
/************************************/

layui.use([ 'layer', 'form', 'rmputils', 'laytpl'], function(){
    var layer = layui.layer,
            form = layui.form,
            rmputils = layui.rmputils,
            laytpl = layui.laytpl;

    $(function(){
        //初始化模板
        serverInfoEditTpl = laytpl($("#server-info-edit-tpl").html());
        serverInfoParameterEditTpl = laytpl($("#server-info-parameters-edit-tpl").html());
        serverInfoBatchSaveTpl = laytpl($('#server-info-batch-add-tpl').html());

        //初始化相关页面
        var $showView = $('.rmp-serverInfo-btn-tools > .layui-btn-group')
        $.each(serverInfos.serverTypes, function(type, name) {
            $showView.append('<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="' + type + '">' + name + '</button>');
        });
        /********************************初始化表格**************************************************/
        table = $('.layui-table').on('preXhr.dt', function( e, settings, data){
                globalLoadIndex = layer.msg('正在加载数据...', {icon:16, time:99999999, shade:0.4});
            }).on('init.dt', function(){
                layer.close(globalLoadIndex);
            }).DataTable($.extend(true, {}, DT_CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
            "columnDefs": [{"orderable":false, "aTargets":[0, 5, 9, 10]}],
            "ajax":SERVER_INFO_LIST_ALL_URL + '?userKey=' + userKey,
            "columns":[
                {
                    "data": null,
                    "render": function(data) {
                        return '<input type="checkbox">';
                    }
                },
                {
                    "data":"id"
                },
                {
                    "data":'host',
                    "render":function( data, type, row, meta) {
                        return data + ":" + row.port;
                    }

                },
                {
                    "data":'realHost',
                    "render":function(data) {
                        return data;
                    }

                },
                {
                    "data":"username"
                },
                {
                    "data":"password",
                    "render":function(data) {
                        return '<a class="layui-btn layui-btn-sm" href="javascript:;" onclick="layer.alert(\'' + data + '\', {title:\'密码查看\', icon:4, shadeClose:true});">查看</a>';
                    }
                },
                {
                    "data":"serverType",
                    "render":function(data) {
                        return '<img src="../images/' + data + '.png" alt="' + data + '" title="' + data + '" style="height:30px;width:34px;"/>' + data;
                    }
                },
                {
                    "data":"createTime",
                    "render":DT_CONSTANT.DATA_TABLES.COLUMNFUN.ELLIPSIS
                },
                {
                    "data":"lastUseTime",
                    "render":DT_CONSTANT.DATA_TABLES.COLUMNFUN.ELLIPSIS
                },
                {
                    "data":"tags",
                    "render":function(data){
                        var arrs = data.split(" ");
                        var html = '';
                        $.each(arrs, function(i, n) {
                            html += '<span class="layui-badge layui-bg-green rmp-server-info-tags-label">' + n + '</span>&nbsp;';

                        });
                        return html;
                    }
                },
                {
                    "data":null,
                    "render":function(data) {
                        var html = '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm del-server">删除</button>'
                                + '<button type="button" class="layui-btn layui-btn-warm layui-btn-sm update-server">修改</button>'
                                + '<button type="button" class="layui-btn layui-btn-normal layui-btn-sm start-server">监控</button>'
                                + '<button type="button" class="layui-btn layui-btn-sm copy-server">复制</button>';
                        return html;
                    }
                }
            ]
            }));
            /*************************************绑定代理事件监听******************************************************/
            $(document).delegates({
                //删除指定服务器信息
                '.del-server':function(){
                    var data = table.row($(this).parents('tr')).data();
                    var that = this;
                    layer.confirm('确认要删除该条数据吗?', {title:"提示"}, function(index){
                        //向服务端发送删除指令
                        $.post(SERVER_INFO_DEL_URL, {id:data.id, userKey:userKey}, function(json){
                            validatReturnJson(json, function(){
                                table.row($(that).parents('tr')).remove().draw();
                                layer.msg('删除成功!', {icon:1, time:1800});
                            });
                        });
                        layer.close(index);
                    });
                },
                //更新指定服务器信息
                '.update-server':function(){
                    var data = table.row($(this).parents('tr')).data();
                    data.serverTypes = serverInfos.serverTypes;
                    layer_show('编辑服务器信息', serverInfoEditTpl.render(data), 800, 620, 1, function(layero, index){
                        //表单渲染
                        $('#serverType').val(data.serverType);
                        form.render(null, 'server-info-form');
                    });
                },
                //开启监控
                '.start-server':function(){
                    var data = table.row($(this).parents('tr')).data();
                    $.post(SERVER_INFO_MONITORING_URL, {id:data.id, userKey:userKey}, function(json){
                        validatReturnJson(json, function(){
                            layer.msg('启动监控成功!', {icon:1, time:1800});
                        });
                    });
                },
                //复制信息
                '.copy-server':function(){
                    var data = table.row($(this).parents('tr')).data();
                    data.serverTypes = serverInfos.serverTypes;
                    layer_show('复制服务器信息', serverInfoEditTpl.render(data), 800, 620, 1, function(layero, index){
                        //删除已存在的id
                        layero.find("#id").val('');
                        //表单渲染
                        $('#serverType').val(data.serverType);
                        form.render(null, 'server-info-form');
                    });
                },
                //根据标签过滤
                '.rmp-server-info-tags-label':function(){
                    var that = this;
                    table.columns(9).search($(that).text()).draw();
                },
                //添加服务器
                '.rmp-serverInfo-btn-tools-right button:eq(0)':function(){
                    layer_show('添加服务器信息', serverInfoEditTpl.render({serverTypes:serverInfos.serverTypes}), 800, 620, 1, function(layero, index){
                        //表单渲染
                        form.render(null, 'server-info-form');
                    });
                },
                //批量操作
                '.rmp-serverInfo-btn-tools-right button:eq(1)':function(){
                    layer.confirm('请点击下方按钮选择操作:', {shadeClose:true, title:'批量操作工具', btn: ['批量监控', '批量添加', '批量删除']
                                ,btn3: function(index, layero) {//批量删除
                                    batchOp(SERVER_INFO_DEL_URL, '删除', table, 'id', 'host', {userKey:userKey});
                                }}
                            , function(index, layero) { //批量启动监控
                                batchOp(SERVER_INFO_MONITORING_URL, '启动监控', table, 'id', 'host', {userKey:userKey});
                                layer.close(index);
                            }
                            , function(index, layero) { //批量添加
                                layer_show('批量添加', serverInfoBatchSaveTpl.render({}), 800, null, 1, function(index, layero){
                                    form.render();
                                })
                                layer.close(index);
                            });
                },
                //刷新按钮
                '.rmp-serverInfo-btn-tools-right button:eq(2)':function(){
                    table.ajax.reload(function(data) {
                        table.columns(9).search('').draw();
                        layer.close(globalLoadIndex);
                    }, false);
                },
                //根据服务器器类型筛选刷新表格
                '.rmp-serverInfo-btn-tools > .layui-btn-group > button':function(){
                    var that = this;
                    var serverType = $(this).attr('data-type');
                    var reAjaxUrl = SERVER_INFO_LIST_ALL_URL + '?userKey=' + userKey;
                    if (rmputils.stringUtils.isNotEmpty(serverType)) {
                        reAjaxUrl += '&serverType=' + serverType;
                    }
                    table.ajax.url(reAjaxUrl).load(function(data){
                        $(that).removeClass('layui-btn-primary').siblings('button').addClass('layui-btn-primary');
                        layer.close(globalLoadIndex);
                    }, false);
                },
                //打开编辑页面的服务器附加参数编辑页面
                '#server-info-setting-parameters':function(){
                    var parameters = $(".rmp-serverInfo-edit-form #parameters").val();
                    //要打开的类型
                    var serverType = $(".rmp-serverInfo-edit-form #serverType").children('option:selected').val();
                    var renderData = {
                        parameters:serverInfos[serverType]['additionalParameters'],
                        values:{}
                    };
                    if (rmputils.stringUtils.isNotEmpty(parameters)) {
                        parameters = JSON.parse(parameters);
                        renderData['values'] = parameters;
                    }
                    //关闭时获取参数并转换成json串
                    layer_show('附加参数设置', serverInfoParameterEditTpl.render(renderData), 600, 400, 1, null, function(index, layero){
                        var json = {};
                        layero.find('input').each(function(i, n){
                            json[$(n).attr('id')] = $(n).val();
                        });
                        $(".rmp-serverInfo-edit-form #parameters").val(JSON.stringify(json));
                    }, null, {shadeClose:false});
                }
            });
            /********************************************表单事件监听****************************************************************/
            //监听批量提交事件
            form.on('submit(server-info-batch-save)', function(data){
                data.field.userKey = userKey;
                $.post(SERVER_INFO_BATCH_SAVE_URL, data.field, function(json){
                    validatReturnJson(json, function(){
                        table.ajax.reload(null, false);
                        layer.closeAll('page');
                        layer.alert('共成功添加 ' + json.data.successCount + ' 条,失败 ' + json.data.failCount + ' 条!', {title:'提示'});
                    })
                });
                return false;
            });

            //监听编辑表单提交事件
            form.on('submit(server-info-single-edit)', function(data){
                data.field.userKey = userKey;
                $.post(SERVER_INFO_EDIT_URL, data.field, function(json) {
                    validatReturnJson(json, function(){
                        table.ajax.reload(null, false);
                        layer.closeAll('page');
                        layer.msg('更新/添加成功!', {icon:1, time:1800});
                    })
                });
                return false;
            });


    });

});


</script>
</body>

</html>

